<template>
  <div class="Ys-m-menu-wrapper">
    <template v-if="unfold">
      <!-- 第一种展开显示样式 -->
      <div class="contentbox">
        <YsMenu class="MenuList" ref="YSMenu" width="auto" :active-name="ActiveMenuName" :open-names="openedNames" :accordion="true" @on-select="handleSelect">
          <template v-for="item in MenuList_Source">
            <re-submenu v-if="item.tabs && item.tabs.length > 0" :key="`menu_${item.rs_code}`" :parent="item" :name="item.frame"></re-submenu>
            <YsMenuItem v-else :key="`menu_${item.rs_code}`" :name="`${item.frame}`">
              <span v-if="item.rsim_url != ''" class="wrapper-icon" :class="item.rsim_url"></span>
              <span v-else class="iconStyle proIconfont npmProzhuye2"></span>
              <span class="menuName">{{ item.name }}</span>
            </YsMenuItem>
          </template>
        </YsMenu>
      </div>
    </template>
    <!-- 第二种有折叠情况显示样式 -->
    <template v-else>
      <div class="drop-wrapper ysDropWap">
        <template v-for="item in MenuList_Source">
          <ReDrowdown @on-select="handleSelect" v-if="item.tabs" :key="`drop_${item.rs_code}`" :parent="item" :show-title="false" :IsSecondLevel="true"></ReDrowdown>
          <div v-else :key="`drop_${item.rs_code}`" class="ivu-dropdown first">
            <YsTooltip placement="right" transfer :content="item.name">
              <span @click="handleSelect(item.frame)">
                <span v-if="item.rsim_url != ''" class="iconStyle" :class="item.rsim_url"></span>
                <span v-else class="iconStyle proIconfont npmProzhuye2">
                  <YsIcon type="logo-angular" class="menu-icon" />
                </span>
              </span>
            </YsTooltip>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import ReSubmenu from './submenu.vue';
import ReDrowdown from './Drowdown.vue';

/**
 * @displayName YsMMenu
 * @requires ./submenu.vue
 * @requires ./Drowdown.vue
 */
export default {
  name: 'side_menu',
  components: {
    ReSubmenu,
    ReDrowdown,
  },
  props: {
    /**
     * 是否是展开状态
     */
    unfold: {
      type: Boolean,
      default: true,
    },
    /**
     * 菜单列表数据
     */
    MenuList_Source: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      ActiveMenuName: this.$route.name || '',
      openedNames: [],
      ops: {
        rail: {
          opacity: '0.2',
          background: '#1F293D',
          size: '3px',
        },
        bar: {
          background: '#cecece',
          keepShow: false,
          size: '3px',
          minSize: 0.2,
        },
        scrollButton: {
          enable: true,
          background: '#1F293D',
        },
        scrollPanel: {
          easing: 'easeInQuad',
          speed: 500,
        },
      },
    };
  },
  mounted() {
    let _this = this
    _this.openedNames[0] = ['yygl']



    this.$nextTick(() => {
      _this.$refs["YSMenu"].updateOpened();
    });
  },
  methods: {
    // 路由跳转
    handleSelect(name) {
      /**
       * 获取当前菜单的名称
       * @property {string} name 菜单名称
       * @event on-select
       */

      this.$emit('on-select', name);
    },

    //获取当前位置
    openMenuName(name) {
      let _this = this
      for (let i = 0; i < this.MenuList_Source.length; i++) {
        const item = this.MenuList_Source[i];
        if (item.tabs && item.tabs.length > 0) {
          for (let j = 0; j < item.tabs.length; j++) {
            let cur = item.tabs[j]
            if (cur.frame === name) {
              this.openedNames = [this.MenuList_Source[i].frame]
            }
          }
        }
      }
    },
  },

  watch: {
    $route(newRoute) {
      let _this = this
      this.ActiveMenuName = newRoute.name;
    },
    MenuList_Source: {
      handler(newVal) {
        this.openMenuName(this.$route.name)
      },
      deep: true,
      immediate: false,
    }
  },
};
</script>
<style lang="less" scoped>
.menuName {
  font-size: 16px;
}
</style>
